<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>带缺口的矩形SVG示例</title>
    <style>
        .svg-container {
            border: 1px solid #ccc;
            margin: 20px;
            padding: 10px;
        }
        .notched-rect {
            transition: fill 0.3s ease;
        }
        .notched-rect:hover {
            fill: #4CAF50;
        }
    </style>
</head>
<body>
    <h2>带缺口的矩形SVG示例</h2>
    
    <div class="svg-container">
        <svg width="400" height="300">
            <!-- 带缺口的矩形 -->
            <path class="notched-rect"
                  d="M 50 50 h 200 v 30 h 30 v 40 h -30 v 30 h -200 z"
                  fill="#2196F3"
                  stroke="#1976D2"
                  stroke-width="2"/>
            
            <!-- 说明文本 -->
            <text x="50" y="200" fill="#333" font-size="14">带缺口的矩形 (使用SVG path绘制)</text>
        </svg>
    </div>

    <div>
        <p>这个示例展示了：</p>
        <ul>
            <li>使用SVG path元素创建带缺口的矩形</li>
            <li>添加了鼠标悬停效果（颜色变化）</li>
            <li>使用了平滑的过渡动画</li>
        </ul>
    </div>
</body>
</html>